<template>
    <div class="cartContainer">
        <div class="mui-card" v-for="item in list" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner card-list">
                    <mt-switch v-model="valList[item.id]" @change="changeVal(item.id)"></mt-switch>
                    <img :src="item.thumb_path">
                    <div class="info">
                        <p class="title">{{item.title}}</p>
                        <div class="infoBottom"><span class="price">￥{{item.sell_price}}</span>
                            <cartNumberBox :val="countList[item.id]" :id="item.id"></cartNumberBox>
                            <a @click.prevent="removeGood(item.id)">删除</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card pay">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="left">
                            <p>总计</p>
                            <p>已钩选商品<span class="red">{{$store.getters.getTotalCar.count}}</span>件，总价<span class="red">￥{{$store.getters.getTotalCar.amount}}</span></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
		</div>
    </div>
</template>

<script>
    import cartNumberBox from '../subcomponents/cartNumberBox.vue';
    export default {
        data() {
            return {
                value: false,
                list: [],
                countList: null,
                valList: null
            }
        },
        methods: {
            getDataList() {
                var idList = [];
                this.$store.state.car.forEach(item => {
                    idList.push(item.id);
                });
                if( idList.length == 0 ) {
                    this.list = [];
                    return;
                }
                this.$http.get(`api/goods/getshopcarlist/${idList.join(',')}`).then( res => {
                    if(res.body.status == 0 ) {
                        this.list = res.body.message;
                    }
                });
            },
            removeGood(id) {
                this.$store.commit('carRemove',id);
                this.getDataList();
            },
            changeVal(id) {
                this.$store.commit('carButtonChang',{id: id, val:this.valList[id]});
            }
        },
        components: {
            cartNumberBox: cartNumberBox
        },
        created() {
            this.getDataList();
            this.countList = this.$store.getters.getCountList;
            this.valList = this.$store.getters.getCarButton;
        },
    }
</script>


<style lang="less" slot-scope>
.cartContainer {
    background-color: #eee;
    overflow: hidden;
    .card-list {
        display: flex;
        padding: 8px;
        .title {
            margin: 0;
            line-height: 14px;
            font-size: 13px;
            margin-left: 5px;
        }

        img {
            width: 60px;
            height: 60px;
            display: block;
        }

        .info {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .infoBottom {
                display: flex;
                // justify-content: space-between;
                padding-left: 5px;
                width: 100%;
            }
            .price {
                color: red;
                font-weight: 600;
            }
        }
    
    }
    .pay {
        .mui-card-content-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .red {
                color: red;
            }
        }
    }
}
</style>